<template>
	<div class="prescription-detail-page">
		<!-- 侧边导航 -->
		<div class="left-menu">
			<div class="float-box">
				<FloatBrif :menuList="menuList" :anchorCode="anchorCode" @toExpand="toExpand" @toJump="toJump"/>
			</div>
		</div>
		<div class="prescription-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			
			<div class="cont-box" v-if="detailId">
				<!-- Basic information -->
				<div ref="anchor1" class="anchor1">
					<Basic :detailId="detailId" @toCalc="toCalc"/>
				</div>

				<!-- Prescription composition 
					Herb
					Ingredient
					Target-->
				<div ref="anchor2" class="anchor2">
					<div class="title-box">
						<TitleBox>
							<template #titlecont>
								<span class="label-link-txt" v-lang="{lang: controlSto.language, lgid: -83}">Prescription composition</span>
								<!-- <span v-lang="{lang: controlSto.language, lgid: -25}">composition</span> -->
							</template>
						</TitleBox>

						<div ref="anchor2101" class="anchor2101">
							<CompHerb :detailId="detailId" @toCalc="toCalc"/>
						</div>

						<div ref="anchor2102" class="anchor2102">
							<CompIngredient :detailId="detailId" @toCalc="toCalc"/>
						</div>
						<div ref="anchor2103" class="anchor2103">
							<CompTarget :detailId="detailId" @toCalc="toCalc"/>
						</div>
					</div>
				</div>

				<!-- Omics data records 
						Experimental records-->
				<div ref="anchor3" class="anchor3">
					<TitleBox>
						<template #titlecont>
							<span v-lang="{lang: controlSto.language, lgid: -26}">Omics data records</span>
						</template>
					</TitleBox>
					<div ref="anchor3101" class="anchor3101">
						<OmicsOverall :detailId="detailId" @toCalc="toCalc" :expIdFlag="dataObj.expIdFlag" :expId="dataObj.expId"/>
					</div>
					<div ref="anchor3102" class="anchor3102">
						<RecoExpe :detailId="detailId" @toCalc="toCalc" @getExpId="getExpId"/>
					</div>
				</div>

				<!-- Combinational landscape 
						Overall network
						Herb-herb interactions
						Ingredient-ingredient interactions
						Related literatures-->
				<div ref="anchor4" class="anchor4">
					<TitleBox>
						<template #titlecont>
							<span v-lang="{lang: controlSto.language, lgid: -28}">Combinational landscape</span>
						</template>
					</TitleBox>


					<div ref="anchor4101" class="anchor4101">
						<LandOverall :detailId="detailId" @toCalc="toCalc"/>
					</div>
					<!-- <div ref="anchor4102" class="anchor4102">
						<LandHerbherbInteract :detailId="detailId" @toCalc="toCalc"/>
					</div>
					<div ref="anchor4103" class="anchor4103">
						<LandIngringrInteract :detailId="detailId" @toCalc="toCalc"/>
					</div> -->
					<div ref="anchor4102" class="anchor4102">
						<LandRelated :detailId="detailId" @toCalc="toCalc"/>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>



<script setup>
	import { ref, reactive, watch, unref, computed, onBeforeMount, onMounted, nextTick } from 'vue'
	import BreadCrumb from '@/components/BreadCrumb.vue'
	import Basic from '@/components/prescription/PrescriptionBasic.vue'
	import CompHerb from '@/components/prescription/CompHerb.vue'
	import CompIngredient from '@/components/prescription/CompIngredient.vue'
	import CompTarget from '@/components/prescription/PresCompTarget.vue'
	import RecoExpe from '@/components/prescription/PresRecoExpe.vue'

	import LandRelated from '@/components/prescription/LandRelated.vue'
	import LandOverall from '@/components/prescription/PresLandOverall.vue'
	import OmicsOverall from '../components/prescription/OmicsOverall.vue'
	import LandIngringrInteract from '@/components/prescription/PresLandIngringrInteract.vue'
	import LandHerbherbInteract from '@/components/prescription/LandHerbherbInteract.vue'


    import FloatBrif from '@/components/FloatBrif.vue'
    import TitleBox from '@/components/TitleBox.vue'
    // import DetailItemList from '@/components/DetailItemList.vue'
	import { debounce } from 'lodash'
	import { useRouter } from 'vue-router'
    import { controlStore } from '@/stores/control'
    import { langTxt, preventPeep } from '@/utils/util'
    // import { getPrescriptionIngrMetabolicStabilityList, getPrescriptionHalfLifePeriodList, 
		// getPrescriptionTransportModeList } from '@/service/tcm'

    import addImg from '@/assets/img/add.png'
    import minuImg from '@/assets/img/minu.png'

	let ancDebounce = null;

	let anchor1 = ref(null);
	let anchor2 = ref(null);
	let anchor3 = ref(null);
	let anchor4 = ref(null);

	let anchor2101 = ref(null);
	let anchor2102 = ref(null);
	let anchor2103 = ref(null);
	let anchor3101 = ref(null);
	let anchor3102 = ref(null);
	let anchor4101 = ref(null);
	let anchor4102 = ref(null);
	let anchor4103 = ref(null);
	let anchor4104 = ref(null);
	const anchorCode = ref('');
	const leftMenu =ref()
	const controlSto = controlStore();
	const router = useRouter();
	const detailId = ref('');

	const condObj = reactive({
        // halfLifePeriodList: [],
        // transportModeList: [],
        // metabolicStabilityList: []
	});
	const dataObj = reactive({
		crumbList: [
			{
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-18',
                lable: 'Prescription',
                name: 'pressearch'
            }, {
				fkey: '-51',
                lable: 'Details',
                name: ''
            }
        ],
		isShowAnchorExp2: false,
		isShowAnchorExp3: false,
		isShowAnchorExp4: false,
		expIdFlag: 'Y',
		expId: ''
	});
	const anchorList = reactive([
	{
			anchorName: 'anchor1',
			value: anchor1
		}, {
			anchorName: 'anchor2',
			value: anchor2
		},  {
			anchorName: 'anchor3',
			value: anchor3
		},  {
			anchorName: 'anchor4',
			value: anchor4
		},  {
			anchorName: 'anchor2101',
			value: anchor2101
		},  {
			anchorName: 'anchor2102',
			value: anchor2102
		},  {
			anchorName: 'anchor2103',
			value: anchor2103
		},  {
			anchorName: 'anchor3101',
			value: anchor3101
		},  {
			anchorName: 'anchor3102',
			value: anchor3102
		}, {
			anchorName: 'anchor4101',
			value: anchor4101
		},  {
			anchorName: 'anchor4102',
			value: anchor4102
		}, 
	])
	const menuList = reactive([
		{
			menuName: 'Prescription information',
			isExpend: false,
			code: 'PresInfo1',
			anchor: 'anchor1',
			lgid: '-114',
			children: []
		},
		{
			menuName: 'Prescription composition',
			isExpend: false,
			code: 'PresCompt1',
			anchor: 'anchor2',
			lgid: '-83',
			children: [
				{
					tmenuName: 'Herb',
					code: 'PresCompHerb',
					anchor: 'anchor2101',
					lgid: '-19'
				}, {
					tmenuName: 'Ingredient',
					code: 'PresCompIngre',
					anchor: 'anchor2102',
					lgid: '-20'
				}, {
					tmenuName: 'Target',
					code: 'PresCompTarget',
					anchor: 'anchor2103',
					lgid: '-22'
				}
			]
		}, {
			menuName: 'Omics data records',
			isExpend: false,
			code: 'PresOmicst1',
			anchor: 'anchor3',
			lgid: '-26',
			children: [
				{
					tmenuName: 'Gene expression analysis',
					code: 'PresOmicsGene',
					anchor: 'anchor3101',
					lgid: '-84'
				}, {
					tmenuName: 'Experimental records',
					code: 'PresOmicsExpRecor',
					anchor: 'anchor3102',
					lgid: '-27'
				}
			]
		}, {
			menuName: 'Combinational landscape',
			isExpend: false,
			code: 'PresComLandt1',
			anchor: 'anchor4',
			lgid: '-28',
			children: [
				{
					tmenuName: 'Overall network',
					code: 'PresOverallNetwork',
					anchor: 'anchor4101',
					lgid: '-29'
				}, {
					tmenuName: 'Related literatures',
					code: 'presComLandRelate',
					anchor: 'anchor4102',
					lgid: '-31'
				}
			]
		}
	])

    onBeforeMount(()=> {
		initDebounce();
		// preventPeep();
		initPage();
		// initCond();

    });
	onMounted(()=>{
		toCalc();
	});

	// const getSearchPlace = () => {
	// 	return langTxt(controlSto.language, '-15');
    // };
	const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});

	const getExpId = (id, isGenOmic) => {
		dataObj.expId = id;
		dataObj.expIdFlag = isGenOmic;
	}

	const initDebounce = () => {
        ancDebounce = debounce((e) => {
          //  obtAnchor();
        }, 4000);
    };
	const initPage = () => {
		if(router.currentRoute.value.query && router.currentRoute.value.query.id) {
			detailId.value = router.currentRoute.value.query.id;
		}
    };
	const initCond = () => {
		let params = {
            langCode: controlSto.language == 1 ? 'ENG' : 'CHN'
        };
        // getPrescriptionIngrMetabolicStabilityList(params).then((res) => {
        //     if (res.success && res.data) {
        //         condObj.metabolicStabilityList = res.data || [];
        //     }
        // }).catch(() => { });
        // getPrescriptionHalfLifePeriodList(params).then((res) => {
        //     if (res.success && res.data) {
        //         condObj.halfLifePeriodList = res.data || [];
        //     }
        // }).catch(() => { });
        // getPrescriptionTransportModeList(params).then((res) => {
        //     if (res.success && res.data) {
        //         condObj.transportModeList = res.data || [];
        //     }
        // }).catch(() => { });
    };

	

	const toCalc = () => {
		nextTick(()=>{
			ancDebounce && ancDebounce();
		});
	};
	
	const toExpand = (item, i, flag) => {
		menuList.forEach(e => e.isExpend = false)
		item.isExpend = !flag
		menuList[i].isExpend = !flag
  };
	const toJump = (v, t, index, item) => {
		let tdiv;
		for(const o in anchorList) {
			if (anchorList[o].anchorName == v.anchor) {
				tdiv = anchorList[o].value
			}
		}
		if (t == 1) {
			anchorCode.value= v.code;
		} else {
			anchorCode.value= v.code;
		}
		window.scrollTo({top: (tdiv.offsetTop - 60), behavior: 'smooth' });
  };
   
</script>

<style lang="scss" scoped>
	.prescription-detail-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		// text-align: center;
		background-size: 100% 100%;
		display: flex;
		// justify-content: space-between;
		align-items: top;
		padding-right: 50px;
		.prescription-cont {
			display: inline-block;
			width: calc(100vw - 380px);
    	text-align: left;
			padding-left: 30px;
			// min-width: 800px;
			.title-box {
				padding-bottom: 24px;
			}
		}
		.left-menu {
			width: 240px;
			.float-box {
				position: fixed;
				top: 75px;
				z-index: 9999;
				.brif-box {
					.brif-item {
						position: relative;
						padding: 24px;
						border-bottom: 1px solid #E6C896;
						font-weight: 600;
						font-size: 14px;
							text-align: left;
						cursor: pointer;
						&.brif-item-on {
							background: linear-gradient( 90deg, rgba(188,159,119,0.2) 0%, rgba(188,159,119,0) 100%);
							border-left: 3px solid #BC9F77;
						}
						.act-box {
							position: absolute;
							right: 10px;
							height: 16px;
							// border: 1px dashed ;
							.act-img {
								width: 16px;
							}
						}
						.brif-spot {
							position: relative;
							display: inline-block;
							width: 4px;
							height: 4px;
							bottom: 3px;
							right: 6px;
							border-radius: 50%;
							background-color: #BC9F77;
						}
						// .brif-txt {
						// 	display: inline-block;
						// 	padding-right: 6px;
						// }
					}
					// .brif-item-main {
					// 	padding-right: px;
					// }
					.brif-item-sub {
						padding-left: 36px;
					}
				}
			}
		}
		
		// .label-link-txt {
		// 	display: inline-block;
		// 	padding-right: 6px;
		// }
	}
	
</style>